<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link href="../resources/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../resources/css/style.css" rel="stylesheet">
<link href="../resources/css/exam.css" rel="stylesheet">

<script type="text/javascript" src="../resources/js/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="../resources/vue/vue.js"></script>
<script type="text/javascript" src="../resources/vue/date.js"></script>
<script type="text/javascript" src="../resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../resources/js/all.js"></script>
<script type="text/javascript" src="../resources/js/tag-list.js"></script>
<script type="text/javascript" src="../resources/js/add-tag.js"></script>
<script type="text/javascript" src="../resources/js/add-tag.js"></script>
<script type="text/javascript" src="../resources/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="../resources/laypage/laypage.js" charset="utf-8"></script>
<script type="text/javascript" src="../resources/layui/layui.all.js" charset="utf-8"></script>
<body>

<header>
    <div class="logo">
        <h1>在线考试系统</h1>
    </div>
    <div class="navbar bs-docs-nav" role="banner">
        <div class="container" style="margin: 0  264px ;">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="main.html" style="font-size: 1.2em; width: 135px;"><i
                            class="glyphicon glyphicon-home"></i>&nbsp;首页</a>
                </li>
                <li>
                    <a href="/view/question/question-list" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-list"></i>&nbsp;试题管理</a>
                </li>

                <li>
                    <a href="exampaper-list.html" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-list-alt"></i>&nbsp;试卷管理</a>
                </li>
                <li>
                    <a href="exam-list.html" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-indent-right"></i>&nbsp;考试管理</a>
                </li>
                <li>
                    <a href="user-list.html" style="font-size: 1.2em;width: 130px;"><i
                            class="glyphicon glyphicon-user"></i>&nbsp;用户管理</a>
                </li>
                <li>
                    <a href="tag-list.html" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-random"></i>&nbsp;通用管理</a>
                </li>
                <li>
                    <a href="news-list.html" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-cog"></i>&nbsp;系统设置</a>
                </li>
            </ul>
            <a href="/userLogout" style="position: absolute;right: 100px; top: 10px;"><i class=""></i>[注销]</a>
        </div>

    </div>
</header>


<div id="exam-content-left" style="width: 150px; position: relative ;left: 220px;">
    <ul class="nav nav-pills nav-stacked" style="font-size: 1.1em; margin-top: 100px; text-align: right;">

        <li>
            <a href="exam-list.html"> <i class="glyphicon glyphicon-th-list"></i> 考试管理 </a>
        </li>
        <li>
            <a href="exam-add.html"> <i class="glyphicon glyphicon-log-out"></i> 发布考试 </a>
        </li>

        <li class="active">
            <a href=""> <i class="glyphicon glyphicon-log-out"></i>考试历史 </a>
        </li>
    </ul>
</div>

<div class="container">
    <div class="col-xs-10" id="right-content" style="padding-top: 0px;">
        <div id="app" class="container">
            <div class="table-responsive" style="width:1050px;">

                <div class="page-content">

                    <div id="question-list">
                        <table class="table-striped table">
                            <thead>
                            <tr>
                                 <input type="text" class="form-control" placeholder="考试名" id="examName" style="width: 100px;display: inline "/>&emsp;
                                 <input class="layui-input" placeholder="考试时间" type="text" id="startTime" readonly>&nbsp;
                                 <input class="btn btn-sm btn-info" type="button" id="queryExam" value="点击查询" onclick="getUserExamInfo()" />
                            </tr>
                            <tr class="warning">
                                <td>序号</td>
                                <td>考试名称</td>
                                <td>考试时间</td>
                                <td>试卷分数</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr  v-for="(item,index) in userExamInfoResult">
                                <td>{{index+1}}</td>
                                <!--<td><a v-bind:href="'toExampast_userList?examId='+item.exam_id" target="_blank">{{item.exam_name}}</a></td>-->
                                <td><a @click="getExamDetail(item.exam_id)">{{item.exam_name}}</a></td>
                                <td>{{item.create_time | DateFilter}}</td>
                                <td>{{item.totalpoint}}</td>
                            </tr>
                            <tr>
                                <td colspan="4">
                                    <div id="pagenav5"></div>
                                </td>
                            </tr>
                            </tbody>
                            <tfoot>
                            </tfoot>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</div>

<footer>
    <div class="container" style="width: 500px; margin: 0 auto;">
        <div class="row">
            <div class="col-md-12">
                <div class="copy">
                    <p>
                        ExamManage © <a href="javascript:void(0);" target="_blank">ExamManage</a> - <a
                            href="javascript:void(0);" target="_blank">主页</a> | <a href="javascript:void(0);"
                                                                                   target="_blank">关于我们</a>
                        | <a href="javascript:void(0);" target="_blank">FAQ</a> | <a
                            href="javascript:void(0);" target="_blank">联系我们</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>

</body>
</html>
<script type="text/javascript">
    Vue.filter("DateFilter", function (date) {
        var v = new Date(date);
        return formatDate(v, "yyyy-MM-dd HH:mm:ss");
    });


    var app = new Vue({
        el: '#app',
        data: {
            result: [],
            userExamInfoResult: []
        }
    });

    //时间选择
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //日期时间选择器
        laydate.render({
            elem: '#startTime'
            , type: 'datetime'
        });
    })

    $(function () {
        getUserExamInfo();
    });


    function getExamDetail(examId){
        layer.open({
            type: 2,
            title: '考试成绩',
            fix: false,
            skin: 'demo-class',
            maxmin: true,
            shadeClose: true,
            shade: 0.1,
            area: ['1200px', '700px'],
            left: '100px',
            content: '/view/toExampast_userList?examId='+examId,
            end: function () {
            }
        })
    }

    function getUserExamInfo(curr) {
        $.ajax({
            type: 'post',
            url: '/getUserExamInfo',
            data: {
                pageSize: 8,
                pageNum: curr || 1,
                examName:$("#examName").val(),
                startTime:$("#startTime").val()
            },
            dataType: 'json',
            success: function (msg) {
                app.userExamInfoResult = msg.page;
                laypage({
                    cont: 'pagenav5', //分页容器
                    pages: msg.totalPage,//总页数
                    skin: "#333333",
                    first: "首页",
                    last: "尾页",
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getUserExamInfo(obj.curr);
                        }
                    }
                })
            },
            error: function () {
               // alert("列表有误");
            }
        })
    }
</script>